<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>p10_溢出问题</title>
    <style>
        .txt{
            background-color: #ff0000;
            width: 200px;
            /*组合代码 放在一块才生效*/
            /*空白  空间     不换行*/
            white-space: nowrap;
            /*   溢出        隐藏*/
            overflow: hidden;
            /*文字的溢出     替换成省略号*/
            text-overflow: ellipsis;
        }
        .overflow{
            background-color: #00ff00;
            width: 120px;
            height: 100px;
            overflow: hidden;
            overflow: scroll;
            overflow: auto;
        }
    </style>
</head>
<body>
<div class="txt" title="lorem">
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Animi distinctio dolore odio omnis sapiente ullam voluptates! At doloremque ex excepturi hic illo impedit iusto modi non odit, repellendus reprehenderit voluptatibus?
</div>
<div class="overflow">
<img src="../2.png" alt="">
<img src="../2.png" alt="">
<img src="../2.png" alt="">
<img src="../2.png" alt="">
<img src="../2.png" alt=""></div>
</body>
</html>